<template>
  <div id="replyWrap">
    <img src="" alt="" />
    <!-- 回复信息 -->
    <div>
      <p class="replyer">
        {{ replyData.replyerName }}
        <span>回复了</span>
        {{ replyData.beReplyerName }}
        <!-- <span class="time">{{item.}}</span> -->
      </p>
      <p class="commentContent">{{ replyData.commentsContent }}</p>
      <p class="rep_del">
        <span @click="display">回复</span>
        <span @click="del_reply(replyData.id)" v-if="replyData.replyerId == this.userid">删除</span>
      </p>
    </div>
    <!-- 回复功能框 -->
    <template v-if="this.isReplyInputShow">
      <input type="text" v-model="reply" class="replyText" />
      <button @click="addReply">回复</button>
    </template>
  </div>
</template>

<script>
import { Request } from "../until/request";
export default {
  name: "reply",
  props: ["replyData"],
  data() {
    return {
      //输入的回复内容
      reply: "",
      //是否显示回复功能框
      isReplyInputShow: false,
      //当前用户
      userid:0
    };
  },
  mounted() {
    this.userid=sessionStorage.getItem('userId');
  },
  methods: {
    //删除回复
    del_reply(id) {
      let req = new Request();
      let formdata = new FormData();
      formdata.append("id", id);
      req
        .send("post", "api/api/comment/delete", formdata)
        .then(res => {
          if (res.data.code == 200) {
            console.log("reply")
            console.log(res);
            this.$emit("update");
          }
        })
        .catch(err => {
          console.log(err);
        });
      // api/comment/delete
    },
    //添加评论
    addReply() {
      let req = new Request();
      let formdata = new FormData();
      console.log(this.replyData);
      // dynamicStateId 整数 动 态 id
      formdata.append("dynamicStateId", this.replyData.dynamicStateId);
      // replyId 整数 回复的评论id
      formdata.append("replyId", this.replyData.id);
      // replyerId 整数 回 复 者 id
      formdata.append("replyerId", sessionStorage.getItem("userId"));
      // beReplyerId 整数 被回复者id
      formdata.append("beReplyerId", this.replyData.replyerId);

      // commentsContent String 评论内容
      formdata.append("commentsContent", this.reply);

      req
        .send("post", `/api/api/comment/reply`, formdata)
        .then(res => {
          console.log(res);
          //清空回复框内容
          this.reply = "";
          this.$emit("update");
          // this.request("post", "getReplyById");
        })
        .catch(err => {
          console.log(err);
        });
    },
    display() {
      this.isReplyInputShow = true;
    }
  }
};
</script>

<style  scoped>
#replyWrap {
  padding-left: 2rem;
}
.replyer span {
  font-style: italic;
  font-size: 0.7rem;
  margin: 0 0.2rem;
  color: #999;
}
.rep_del span {
  font-size: 0.8rem;
  cursor: pointer;
  color: #999999;
}
.rep_del span:hover {
  color: black;
}
.commentContent {
  padding: 0.4rem 0 1.2rem;
}

.replyText {
  border: 1px solid #cccccc;
  margin: 0.8rem 0.3rem 0 0;
  padding: 0 0.5rem;
  height: 2rem;
  width: 25rem;
}
.replyText + button {
  width: 2rem;
  height: 2rem;
  color: white;
  font-size: 0.7rem;
  border-radius: 0.2rem;
  background: #4da6ff;
  cursor: pointer;
}
.replyText + button:hover {
  background: #007fff;
}
</style>